import { Route, withRouter } from 'react-router-dom'
import React from 'react'
import { CSSTransition } from 'react-transition-group'
import './index.scss'


const FadeInRoute = ({ component: RouteComponent, ...rest }) => {
    if (rest.fullAnimated) {
        //完整转场，渐隐渐现
        return (
            <Route {...rest} children={props => {
                return (
                    <div className="RouteComponentBox">
                        <CSSTransition
                            in={rest.path === rest.location.pathname}
                            classNames={{
                                enter: 'animated',
                                enterActive: 'fadeIn',
                                exit: 'animated',
                                exitActive: 'fadeOut'
                            }}
                            mountOnEnter={true}
                            unmountOnExit={true}
                        >
                            <div className="Route">
                                <RouteComponent {...rest} />
                            </div>
                        </CSSTransition>
                    </div>
                )

            }} />
        )
    } else {
        //简单渐现
        return (
            <Route {...rest} render={props => {
                return (
                    <div className="fadeIn animated">
                        <RouteComponent {...rest} />
                    </div>
                )

            }} />
        )
    }
}

export default withRouter(FadeInRoute)

